<!--百度飞线层图-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>
    <BMap :mapOption="component.compConfigData.mapOption" @on-load-map-success="loadMapSuccessHandler"></BMap>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import BMapCompMixin from '@/mixin/BMapCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'BMapFlyLinesComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, BMapCompMixin],
    attr: {
      version: '1.0',
      configDataTemp: Object.assign({

        mapOption: PnDesigner.buildBMapOptionConfigData({
          center: [108.379023,22.814821],
          tilt: 40,
          zoom: 6
        }),
        flyLinesOption: {
          lineTripColor: '#cddc39',
          lineTripStep: 0.5,
          simpleLineColor: 'rgb(255, 153, 0, 0.6)'
        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'geometry',
            remark: '必须，指定起始坐标与结束坐标等数据，例：{coordinates: [[116, 39],[120, 39]]}'
          },
          {
            field: 'properties',
            remark: '非必须，其他相关业务数据'
          }
        ],
        ds_resultObj: [
          {geometry: {coordinates: [[108.379023,22.814821],[106.658876,26.649245]]}},
          {geometry: {coordinates: [[108.379023,22.814821],[113.281903,23.134243]]}},
          {geometry: {coordinates: [[108.379023,22.814821],[112.941553,28.225061]]}},
          {geometry: {coordinates: [[108.379023,22.814821],[102.859834,24.875027]]}},
          {geometry: {coordinates: [[108.379023,22.814821],[116.418642,39.892574]]}},
          {geometry: {coordinates: [[108.379023,22.814821],[104.092453,30.537148]]}},
          {geometry: {coordinates: [[108.379023,22.814821],[91.140756,29.641197]]}},
          {geometry: {coordinates: [[108.379023,22.814821],[103.90848,36.064109]]}},
          {geometry: {coordinates: [[108.379023,22.814821],[106.594485,29.544717]]}},
          {geometry: {coordinates: [[108.379023,22.814821],[114.210966,22.263645]]}}
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: false, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {
        lineTripLayer: null,
        simpleLineLayer: null
      }
    },
    mounted() {

    },
    methods: {
      async init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {

        }, (result) => {

        });
      },

      loadMapSuccessHandler(map) {
        this.init().then(() => {
          this.map = map;

          this.view = new mapvgl.View({
            map: this.map,
            effects: [
              new mapvgl.BrightEffect({
                threshold: 0,
                blurSize: 2,
                clarity: 1
              }),
            ]
          });

          let newResultObj = this.$PnUtil.deepClone(this.component.compConfigData.ds_resultObj)
          newResultObj = this.lineToCurve(this.runCustomFilter(newResultObj))

          this.lineTripLayer = new mapvgl.LineTripLayer({
            color: this.component.compConfigData.flyLinesOption.lineTripColor, // 飞线动画颜色
            step: this.component.compConfigData.flyLinesOption.lineTripStep
          });
          this.view.addLayer(this.lineTripLayer);
          this.lineTripLayer.setData(newResultObj);

          this.simpleLineLayer = new mapvgl.SimpleLineLayer({
            blend: 'lighter',
            color: this.component.compConfigData.flyLinesOption.simpleLineColor // 飞线颜色
          });
          this.view.addLayer(this.simpleLineLayer);
          this.simpleLineLayer.setData(newResultObj);

          this.runCustomGlobalJsCode()
        })
      },

      lineToCurve (data) {
        let curve = new mapvgl.BezierCurve();
        data.forEach(item => {
          curve.setOptions({
            start: item.geometry.coordinates[0],
            end: item.geometry.coordinates[1],
          })
          item.geometry.coordinates = curve.getPoints(30)
        })
        return data
      }
    },
    computed: {},
    watch: {
      'component.compConfigData.ds_resultObj': {
        handler: function (val, oldVal) {
          if (JSON.stringify(val) != JSON.stringify(oldVal)) {
            let newData = this.$PnUtil.deepClone(val)
            newData = this.lineToCurve(this.runCustomFilter(newData))
            this.lineTripLayer.setData(newData);
            this.simpleLineLayer.setData(newData);
          }
        },
        deep: true
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
